<template>
  <div class="overview-bg">
    <div class="overview">
      <div class="header">
        <div class="header-left" @click="closeDialog"></div>
        <div class="header-middle">
          <!-- <div class="logo"></div> -->
          <div class="title">{{ title }}</div>
        </div>
        <div class="header-right">{{ nowTime }}</div>
      </div>
      <div class="main">
        <over-view-left :data="leftMaps"></over-view-left>
        <over-view-middle
          :data="middleMaps"
          @change-station="changeStation"
        ></over-view-middle>
        <over-view-right :time="nowTime" :data="rightMaps"></over-view-right>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs';
import OverViewLeft from './components/overViewLeft.vue';
import OverViewMiddle from './components/overViewMiddle.vue';
import OverViewRight from './components/overViewRight.vue';
import { login } from '@/service/apis/api';
import {
  getStationTotalInfo,
  largeScreeCount,
  connectorMonitoring,
  largeScreeStationList,
  pagingStationTotal,
  tenDayStationTotal,
  orderTotal,
  orderDay,
} from '@/service/apis/statistical';
import { getMd5 } from '@/utils/utils';

const router = useRouter();
const winHeight = ref(937);
const stationId = ref('');
const title = ref('国天智充运营管理平台');

provide('title', title);

const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));

let timer = ref();
let requestTimer = ref();
let requestMap = ref();

const leftMaps = reactive({
  todayData: {},
  rankData: [],
  terminalData: {},
});

const middleMaps = reactive({
  stationData: {},
  orderData: {},
  mapData: {},
  pastTenData: [],
});

const rightMaps = reactive({
  historyData: {},
  emissionData: {},
  realtimeData: {},
});

const setScale = () => {
  let scaleW = window.innerWidth / 1920;
  const winw = window.innerWidth;
  const winh = window.innerHeight;
  winHeight.value = winh;
  if (winw <= 1366) {
    scaleW = 0.71;
  }
  const overviewWrap = document.querySelector('.overview');
  if (overviewWrap) {
    overviewWrap.setAttribute(
      'style',
      `transform: scale(${scaleW.toFixed(5)},${scaleW.toFixed(
        5
      )});transform-origin:left top;background-size:100% 100%;;
      `
    );
  }
};

// 关闭大屏
const closeDialog = () => {
  if (location.href.indexOf('channel=gtxny') > -1) {
    return;
  }
  router.go(-1);
};

const changeStation = (val: string) => {
  console.log('changeStation', val);
  stationId.value = val || '';
  requestAll();
  clearInterval(requestTimer.value);
  requestTimer.value = null;
  requestTimer.value = setInterval(() => {
    requestAll();
  }, 1000 * 60 * 5);
};

// 无电站id，今日总览和历史总览
// 有today查今日总览，无today查历史总览
const queryStationTotalInfo = (today?: boolean) => {
  const form: any = {
    stationGroup: 1,
  };
  if (today) {
    const fixedTime = dayjs().format('YYYY-MM-DD');
    form.startTime = fixedTime;
    form.endTime = fixedTime;
  }
  if (stationId.value) {
    form.stationNames = [stationId.value];
  }
  getStationTotalInfo(form, false)
    .then((res: any) => {
      if (today) {
        leftMaps.todayData = res || {};
      } else {
        rightMaps.historyData = res || {};
      }
    })
    .catch(() => {});
};

// 大屏电站数
const getLargeScreeCount = () => {
  largeScreeCount({
    stationId: stationId.value,
  })
    .then((res: any) => {
      middleMaps.stationData = res || {};
    })
    .catch(() => {});
};

// 大屏终端监控
const getConnectorMonitoring = () => {
  connectorMonitoring({
    stationId: stationId.value,
  })
    .then((res: any) => {
      leftMaps.terminalData = res || {};
    })
    .catch(() => {});
};

// 大屏电站列表
const getLargeScreeStationList = () => {
  largeScreeStationList({})
    .then((res: any) => {
      middleMaps.mapData = res || {};
    })
    .catch(() => {});
};

// 大屏昨日排名
const getPagingStationTotal = () => {
  pagingStationTotal(
    {
      stationGroup: '1',
      stationNames: stationId.value ? [stationId.value] : [],
    },
    {
      pageNo: 1,
      pageSize: 8,
    }
  )
    .then((res: any) => {
      leftMaps.rankData = res || [];
    })
    .catch(() => {});
};

// 大屏近10天
const getTenDayStationTotal = () => {
  tenDayStationTotal({
    stationGroup: '1',
    stationNames: stationId.value ? [stationId.value] : [],
  })
    .then((res: any) => {
      middleMaps.pastTenData = res || [];
    })
    .catch(() => {});
};

// 大屏当日订单数 订单总数 碳排放 植树
const getOrderTotal = () => {
  orderTotal({
    stationGroup: '1',
    stationNames: stationId.value ? [stationId.value] : [],
  })
    .then((res: any) => {
      middleMaps.orderData = res || {};
      rightMaps.emissionData = res || {};
    })
    .catch(() => {});
};

// 查询1天的每15分钟对应的订单数
const getOrderDay = () => {
  orderDay({
    stationGroup: '1',
    stationNames: stationId.value ? [stationId.value] : [],
  })
    .then((res: any) => {
      rightMaps.realtimeData = res || [];
    })
    .catch(() => {});
};

const requestAll = () => {
  queryStationTotalInfo(true);
  queryStationTotalInfo();
  getLargeScreeCount();
  getConnectorMonitoring();
  getPagingStationTotal();
  getTenDayStationTotal();
  getOrderTotal();
  getOrderDay();
};

const startInterval = () => {
  timer.value = setInterval(() => {
    nowTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
  }, 1000);

  requestTimer.value = setInterval(() => {
    requestAll();
  }, 1000 * 60 * 5);

  requestMap.value = setInterval(() => {
    getLargeScreeStationList();
  }, 1000 * 60 * 5);
};

const initData = () => {
  getLargeScreeStationList();
  requestAll();
  startInterval();
  setScale();
  window.addEventListener('resize', setScale);
};

onMounted(() => {
  if (location.href.indexOf('channel=gtxny') > -1) {
    login({
      userName: 'screen',
      password: getMd5('screen'),
      smsCode: '1',
      requiredSms: false,
    }).then((res: any) => {
      window.localStorage.setItem('token', res?.token);
      initData();
    });
  } else {
    initData();
  }
});

onUnmounted(() => {
  clearInterval(timer.value);
  timer.value = null;
  clearInterval(requestTimer.value);
  requestTimer.value = null;
  clearInterval(requestMap.value);
  requestMap.value = null;
  window.removeEventListener('resize', setScale);
});
</script>
<style lang="scss">
.overview-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow-x: hidden;
  background-image: url('@/assets/images/overView/bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .overview {
    position: absolute;
    z-index: 1;
    width: 1920px;
    height: 1080px;
    display: flex;
    flex-direction: column;
    .header {
      width: 100%;
      height: 154px;
      background-image: url('@/assets/images/overView/header-bg.png');
      background-size: calc(100% - 16px) 100%;
      background-repeat: no-repeat;
      background-position: center center;
      display: flex;
      justify-content: space-between;
      position: relative;
      margin-bottom: -44px;
      &-left {
        margin-left: 39px;
        margin-top: 36px;
        width: 172px;
        height: 40px;
        background-image: url('@/assets/images/overView/logo-guotian1.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        cursor: pointer;
      }
      &-middle {
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        height: 56px;
        line-height: 56px;
        display: flex;
        align-items: center;

        // .logo {
        //   position: relative;
        //   top: 1px;
        //   margin-right: 5px;
        //   width: 50px;
        //   height: 50px;
        //   background-image: url('@/assets/images/overView/logo-guotian.png');
        //   background-size: 100% 100%;
        //   background-repeat: no-repeat;
        // }
        .title {
          font-size: 40px;
          color: #ffffff;
          background: linear-gradient(0deg, #59c8ff 0%, #fafeff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      &-right {
        margin-top: 40px;
        margin-right: 33px;
        font-size: 15px;
        color: #eff7ff;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          top: 0px;
          left: -33px;
          width: 20px;
          height: 20px;
          background-image: url('@/assets/images/overView/header-time.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
    }
    .main {
      display: flex;
      justify-content: space-between;
      flex: 1;
      padding-bottom: 19px;
    }
  }
}
</style>